<template>
   <div :class="['backmap',$store.state.mobile.userAgent ==='mobile'?'mobilemap':'pcmap']" @click.self="handlerMap">
    <div class="mapcent">
      <div style="cursor:pointer;padding:10px 15px 10px 0;text-align: right;font-size: 16px;" @click="handlerMap">X</div>
      <div class="searchmap">
        <el-input v-if="showMapBox" v-model="addressStr" placeholder="请选择或输入地址" style="flex:1;" clearable></el-input>
      <van-button type="primary" size="small" @click="getPoint" style="flex:none;margin:0 5px;">搜索</van-button>
      </div>
        <div class="amap-wrapper">
        <el-amap ref="myMap" v-if="showMapBox" class="amap-box" :vid="'amap-vue'" @init="init" :center="center" :zoom="zoom" :events="events">
          <el-amap-marker :position="center" :draggable="true" :events="markEvents" :label="markerLabel"></el-amap-marker>
        </el-amap>
      </div>
      <div class="mapbtn">
        <van-button type="danger" size="small" @click="handlerMap" class="mapbtninfo">取消</van-button>
        <van-button type="primary" size="small" @click="postPoint" class="mapbtninfo">确定</van-button>
      </div>
    </div>
   </div>
  </template>
  <script>
    export default {
      name: 'getPosition',
      data() {
        return {
          center: [110.0660951, 41.0404915], //地图中心点
          zoom: 14, //地图缩放比例
          addressStr: 'ccc', //选中点的地址
          events: {
            click: this.getPointInfo //点击事件，获取点击位置的信息
          },
          markEvents: {
            dragend: this.getPointInfo //拖拽事件，获取拖拽后位置的信息
          }
        }
      },
      props: ['address','showMapBox'],
      computed: {
        //为marker添加label标签
        markerLabel() {
          return this.addressStr ? {
            offset: [-80, -25],
            content: `<div style="cursor:pointer;">${this.addressStr}</div>`
          } : {}
        }
      },
      created(){
        this.addressStr = this.address
        this.getPoint()
      },
      methods: {
        handlerMap(){
          this.$emit('closeMobileMap');
        },
        //初始化，显示地图
        init() {
            this.getPoint()
        },
        //地图初始化，未使用
        mapInit(o) {
          this.map = this.$refs.myMap.$$getInstance()
        },
        //点击地图更新坐标和地址
        getPointInfo(e) {
          this.getAddress(e.lnglat.lng, e.lnglat.lat)
        },
        //根据地址获取经纬度坐标
        getPoint() {
          let _this = this
          AMap.plugin('AMap.PlaceSearch', function () {
            var placeSearch = new AMap.PlaceSearch();
            //高德地图服务
            placeSearch.search(_this.addressStr, function (status, result) {
              if (status == 'complete') {
                if (result.poiList.pois.length > 0) {
                  _this.center = [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]
                }
              }
            })
          })
        },
        //根据经纬度坐标获取地址
        getAddress(lng, lat) {
          let _this = this
          AMap.plugin('AMap.Geocoder', function () {
            var gc = new AMap.Geocoder({
              radius: 1000,
              extensions: 'all'
            })
            //高德地图服务
            gc.getAddress([lng, lat], (status, rs) => {
              if (rs && rs.regeocode) {
                _this.addressStr = rs.regeocode.formattedAddress
              }
            })
          })
          this.center = [lng, lat]
        },
        //向父级提交数据
        postPoint() {
          if (this.addressStr) {
            this.$emit(
              'mapInfo',
              this.addressStr
            )
          } else {
            this.$message({
              message: '请选取位置!',
              type: 'warning'
            })
          }
        }
      }
    }
  
  </script>
  <style lang="scss">
  .backmap{
    background:rgba(0,0,0,.7);
  }
  .mobilemap{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;
  }
  .pcmap{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 999999;
  }
  .searchmap{
    display:flex;
    flex-wrap: nowrap;
    padding:6px 0;
  }
  .mapcent{
      width:100%;
      height:87%;
      position: absolute;
      bottom:0;
      left: 0;
      background:white;
    }
    .mapbtn{
      display:flex;
      justify-content: center;
      padding-top:14px;
    }
    .mapbtninfo{
      margin-right:20px !important;
      width:50px !important;
      height:33px !important;
    }
    .amap-wrapper {
      width: 100%;
      height: 410px;
      .amap-marker-label{
        border: 1px solid #ccc;
        background:#1890ff;
        color:#fff;
      }
    }
  </style>
  